import React, { useEffect, useState } from 'react'
import { Space, Table, Tag } from 'antd';
import request from '../../api/request'
import { Switch } from 'antd';
import { Button, message, Popconfirm } from 'antd';
import { Tabs } from 'antd-mobile'
import { Radio } from 'antd';
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
  DeleteOutlined,
  RedoOutlined,
  FormOutlined,
  KeyOutlined
} from '@ant-design/icons';
import { Select } from 'antd';
import { Flex } from 'antd';
import {  Checkbox, Form, Input } from 'antd';
import {  Drawer } from 'antd';
import { Pagination } from 'antd';
function Index() {
    const [data,setData]=useState([])
    // 搜索
    const [keyword,setKeyword]=useState('')
    // 新增标题
    const [title,setTitle]=useState('')
    // 新增清空内容
    const [addForm]=Form.useForm()
    // 分页
    const [count,setCount]=useState(0)
    const [page,setPage]=useState(1)
    const [pageSize,setPageSize]=useState(10)
    const getData=()=>{
       const res=request.get('/article/list',
        {
            params:{
                keyword,
                page,
                pageSize
            }
          }
       ).then((res)=>{
        console.log(res)
        setData(res.data.rows)
        setCount(res.data.count)
       })
    }
    useEffect(()=>{
        getData()
    },[keyword,page,pageSize])
    // 分页
    const addll=(page,pageSize)=>{
        setPage(page)
       setPageSize(pageSize)
    }
// 二次删除
const confirm = (id) => {
  const arr=data.filter(item=>item.id!==id)
  setData(arr)
  alert('删除成功')
};
// 选择器
const handleChange = value => {
  console.log(`selected ${value}`);
};
const cancel = e => {
  console.log(e);
  message.error('Click on No');
};
// 批量删除
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const onSelectChange = newSelectedRowKeys => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
//   批量删除按钮
const addl=()=>{
  const arr=data.filter(item!=selectedRowKeys.includes(item.id))
  setData(arr)
  alert('删除成功')
}
// 搜索
const onFinish = values => {
  console.log('Success:', values);
  setKeyword(values.keyword)
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
// 新增抽屉
const [open, setOpen] = useState(false);
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
//   新增按钮
const add=()=>{
    setOpen(true)
    setTitle('新增用户')
    addForm.resetFields('')
}
// 新增表单
const addFinish = values => {
  console.log('Success:', values);

  if(title==='新增用户'){
 request.post('/article',{
    title:values.title,//文章标题
content:values.content,//文章内容
tagList:["HTTP"],//标签  array[string]
categoryList:["HTTP"],//分类  array[string]
authorId:47529555//用户id 暂时写死47529555 登陆成功后返回的用户信息
  }).then((res)=>{
    alert('新增成功')
    setOpen(false)
    getData()

  })
  }else{
   addForm([])
alert('禁止提交')
  }
 
};
const addFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    render: text => <a>{text}</a>,
  },
  {
    title: '用户名',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '姓名',
    dataIndex: 'content',
    key: 'content',
  },
  {
    title: '昵称',
    dataIndex: 'title',
    key: 'title',
  },
   {
    title: '手机号',
    dataIndex: '1359852323',
    key: '13598565555',
  },
   {
    title: '状态',
    dataIndex: '',
    key: '',
     render: text => <a><Switch defaultChecked /></a>,
  },
   {
    title: '创建时间',
    dataIndex: 'createdAt',
    key: 'createdAt',
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button icon={<FormOutlined />}></Button>
        <Button icon={<KeyOutlined />}></Button>
         <Popconfirm
    title="Delete the task"
    description="Are you sure to delete this task?"
    onConfirm={()=>confirm(record.id)}
    onCancel={cancel}
    okText="删除"
    cancelText="取消"
  >
  <Button icon={<DeleteOutlined />}></Button>
  </Popconfirm>
       
        
      </Space>
    ),
  },
];
  return (
    <div>
        <div >
     <Tabs>
          <Tabs.Tab title='首页' key='fruits'>
            {/* 搜索 */}
             <Form
             layout='inline'
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="用户名"
      name="keyword"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item>
  </Form>
          </Tabs.Tab>
          <Tabs.Tab title='用户管理' key='vegetables'>
            西红柿
          </Tabs.Tab>

        </Tabs>
        </div>
        <div style={{float: 'right'}}>
            <Button onClick={add}>+新增</Button>
          <Drawer
        title={title}
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >
         <Form
         form={addForm}
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={addFinish}
    onFinishFailed={addFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="用户名"
      name="title"
      rules={[{ required: true, message: '请输入用户名!' }]}
    >
      <Input />
    </Form.Item>
     <Form.Item
      label="密码"
      name=""
      rules={[{ required: true, message: '请输入密码!' }]}
    >
      <Input />
    </Form.Item>
     <Form.Item
      label="真实姓名"
      name="content"
      rules={[{ required: true, message: '请输入真实姓名!' }]}
    >
      <Input />
    </Form.Item>
       <Form.Item
      label="昵称"
      name=""
      rules={[{ required: true, message: '请输入昵称!' }]}
    >
      <Input />
        </Form.Item>
       <Form.Item
      label="性别"
      name=""
      rules={[{ required: true, message: '请输入性别!' }]}
    >
     <Radio>男</Radio> <Radio>女</Radio>
    </Form.Item>
     <Form.Item
      label="手机号"
      name=""
      rules={[{ required: true, message: '请输入手机号!' }]}
    >
      <Input />
    </Form.Item>
       <Form.Item
      label="邮箱"
      name=""
      rules={[{ required: true, message: '请输入邮箱!' }]}
    >
      <Input />
    </Form.Item>
    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item>
  </Form>
      </Drawer>
         <Button icon={<DeleteOutlined />} onClick={addl}>批量删除</Button>
        <Button>更多....</Button>
        <Button icon={<RedoOutlined />}>刷新</Button>
        <Select
      defaultValue="列设置"
      style={{ width: 120 }}
      onChange={handleChange}
      options={[
        { value: 'jack', label: '横设置' },
        { value: 'lucy', label: '列设置' },
      ]}
    />
        </div>
      
      <Table columns={columns} dataSource={data} 
         rowKey='id'
          rowSelection={rowSelection}
      pagination={{
        
          onChange:addll,
  total:count,
    showSizeChanger:true,
    showQuickJumper:true,
    showTotal:total => `Total ${total} items`,
  
      }}
  
     
   
      />
    </div>
  )
}

export default Index
